<template>
  <view class="tp-nodata-card" :class="{plain: plain}">
    <image class="nodata-img" src="/static/nodata.png" mode="heightFix"></image>
    <view class="text-wrapper">
      <text class="no-data-title">{{title}}</text>
      <text class="no-data-sub-title" v-if="subTitle">{{subTitle}}</text>
    </view>
    <view class="link-wrapper" v-if="links && links.length > 0">
      <view class="link-btn" v-for="(l, idx) in links" :key="'nd-l-' + idx" @click="linkTo(l)">{{l.label}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"tp-nodata-card",
    props: {
      title: {
        type: String,
        default: "未找到符合条件的数据"
      },
      plain: {
        type: Boolean,
        default: false
      },
      subTitle: String,
      links: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        
      };
    },
    methods: {
      linkTo(l) {
        let url = l.url
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss">
@import "@/styles/_var.scss";

.tp-nodata-card {
  color: var(--gray-2);
  overflow: hidden;
  border-radius: $card-border-radius;
  background: $card-bg;
  box-shadow: var(--shadow-1);
  padding: 60px $card-padding;
  margin: 0 $card-padding;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &.plain {
    border-radius: 0;
    background: unset;
    box-shadow: unset;
  }
  
  .nodata-img {
    height: 100px;
  }

  .text-wrapper {
    padding-top: $gutter;
    display: flex;
    flex-direction: column;
    align-items: center;
    .no-data-text {
      color: var(--gray-1);
      font-weight: $font-weight-bold;
      font-size: $font-size-md;
    }
    .no-data-sub-title {
      padding-top: $gutter * 0.5;
      color: var(--gray-3);
      font-size: $font-size-sm;
    }
  }
  .link-wrapper {
    padding-top: $gutter;
    display: flex;
    flex-direction: row;
    align-items: center;
    
    .link-btn {
      background: linear-gradient(-45deg, var(--gray-8), var(--gray-6));
      padding: 4px 12px;
      border: 1px solid var(--gray-5);
      border-radius: 8px;
      cursor: pointer;
      color: var(--gray-2);
      margin-right: $gutter;
      
      &:last-child {
        margin-right: 0
      }
    }
  }
  
}

</style>